<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
  <title>二十四节气</title>
  <style>
    body {
      background: #000 url(./img/starry_sky_bg.jpg) no-repeat center center;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #000;
      color: #fff;
      font-family: Monospace;
      font-size: 13px;
      line-height: 24px;
    }

    #main {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .label {
      color: #FFF;
      font-family: sans-serif;
      font-size: xx-small;
      padding: 2px;
    }

    .label:hover {
      color: red;
    }



    .jieqi {
      position: absolute;
      box-sizing: border-box;
      text-align: center;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      user-select: none;
      pointer-events: none;
      z-index: 1;
    }

    #chunfen {
      top: 35%;
      left: 49%;
    }

    #xiazhi {
      top: 55%;
      left: 35%;
    }

    #qiufen {
      top: 75%;
      left: 49%;
    }

    #dongzhi {
      top: 55%;
      left: 60%;
    }

    #forward {
      position: absolute;
      top: 10px;
      left: 40px;
      z-index: 99;
    }

    .card {
      position: absolute;
      border-width: 0px;
      border-radius: 6px;
      border: 2px solid #fff;
      top: 50px;
      left: 10px;
      text-align: center;
      z-index: 100;
      display: inline-block;
    }
  </style>
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.min.js"></script>
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/controls/OrbitControls.js"></script>
</head>

<body>
  <canvas id="main"></canvas>
  <input type="button" value="下一节气" id="forward" class="btn btn-sm btn-outline-info" onclick="forward();" />

  <div id="chunfen" class="jieqi">春分</div>
  <div id="xiazhi" class="jieqi">夏至</div>
  <div id="qiufen" class="jieqi">秋分</div>
  <div id="dongzhi" class="jieqi">冬至</div>

  <div class="card border-secondary text-white bg-secondary mb-3" style="width: 18%; height:200px;">
    <div class="card-body">
      <img src="..." class="card-img-top" id="card-img-top" alt="...">
      <h6 class="card-title" id="card-title"></h6>
      <p class="card-text" id="card-text"></p>
    </div>
  </div>

  <script>
    var scene = new THREE.Scene();
    var texLoader = new THREE.TextureLoader();

    //add cloud
    var cloud = cloudFun()
    scene.add(cloud)

    var intersectsArr = []
    let Data = data()

    //add sun
    var sun = createSphereMesh(Data.sun.R, Data.sun.URL);
    sun.name = Data.sun.name;
    intersectsArr.push(sun)
    scene.add(sun)

    var planetGroup = new THREE.Group();
    scene.add(planetGroup);

    Data.planet.forEach(function (obj) {
      var planet = createSphereMesh(obj.R, obj.URL);
      planet.revolutionR = obj.revolutionR;
      planet.angle = 0;
      planet.name = obj.name;
      planetGroup.add(planet);
      intersectsArr.push(planet)
      var line = circle(obj.revolutionR);//运行轨道，半径为revolutionR
      scene.add(line);
    })

    var startAngle = 0.001;
    var endAngle = 2 * Math.PI / 24;

    var jieqiInfo = [
      { "title": "春分1", "text": "春分春分春分1", "img": "img/1.jpg" },
      { "title": "春分2", "text": "春分春分春分2", "img": "img/2.jpg" },
      { "title": "春分3", "text": "春分春分春分3", "img": "img/1.jpg" },
      { "title": "春分4", "text": "春分春分春分4", "img": "img/1.jpg" },
      { "title": "春分5", "text": "春分春分春分5", "img": "img/1.jpg" },
      { "title": "春分6", "text": "春分春分春分2", "img": "img/1.jpg" },
      { "title": "春分7", "text": "春分春分春分2", "img": "1.jpg" },
      { "title": "春分8", "text": "春分春分春分2", "img": "1.jpg" },
      { "title": "春分9", "text": "春分春分春分2", "img": "1.jpg" },
      { "title": "春分10", "text": "春分春分春分2", "img": "1.jpg" },
      { "title": "春分11", "text": "春分春分春分2", "img": "1.jpg" },
      { "title": "春分12", "text": "春分春分春分2", "img": "1.jpg" },
      { "title": "春分13", "text": "春分春分春分2", "img": "1.jpg" },
      { "title": "春分2", "text": "春分春分春分2", "img": "1.jpg" },
      { "title": "春分2", "text": "春分春分春分2", "img": "1.jpg" },
      { "title": "春分2", "text": "春分春分春分2", "img": "1.jpg" },
      { "title": "春分2", "text": "春分春分春分2", "img": "1.jpg" },
      { "title": "春分2", "text": "春分春分春分2", "img": "1.jpg" },
      { "title": "春分2", "text": "春分春分春分2", "img": "1.jpg" },
      { "title": "春分2", "text": "春分春分春分2", "img": "1.jpg" },
      { "title": "春分2", "text": "春分春分春分2", "img": "1.jpg" },
      { "title": "春分2", "text": "春分春分春分2", "img": "1.jpg" },
      { "title": "春分2", "text": "春分春分春分2", "img": "1.jpg" },
      { "title": "春分2", "text": "春分春分春分2", "img": "1.jpg" },
    ]

    var jieqiIdx = 0;
    function forward() {
      if (startAngle == 0.001) {
        startAngle = 0;
      }
      else {
        startAngle = startAngle + 2 * Math.PI / 24;
        endAngle = endAngle + 2 * Math.PI / 24;
      }

      //var jieqiIdx = startAngle / (2 * Math.PI / 24);
      jieqiIdx += 1;
      jieqiIdx = jieqiIdx % 24;
      var imageDom = document.getElementById("card-img-top");
      imageDom.src = jieqiInfo[jieqiIdx].img;
      var titleDom = document.getElementById("card-title");
      titleDom.innerText = jieqiInfo[jieqiIdx].title;
      var textDom = document.getElementById("card-text");
      textDom.innerText = jieqiInfo[jieqiIdx].text;
    }

    var width = window.innerWidth;
    var height = window.innerHeight;
    var k = width / height;
    var s = 310;

    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1500);
    //camera.position.set(651, 613, 525);
    camera.position.set(5, 413, -530);
    camera.lookAt(scene.position);


    var point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300);
    scene.add(point);

    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);

    const canvas = document.getElementById('main');

    /*画布大小*/
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    var renderer = new THREE.WebGLRenderer({
      canvas,
      alpha: true,
      antialias: true
    });

    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.shadowMap.enabled = true; //辅助线
    renderer.shadowMapSoft = true; //柔和阴影
    renderer.setClearColor(0xffffff, 0);
    document.body.appendChild(renderer.domElement);

    var chooseMesh = null;
    let clock = new THREE.Clock();
    var FPS = 30;
    var refreshTime = 1 / FPS;
    var timeS = 0;
    function render() {
      sun.rotation.y += 0.01;
      var interval = clock.getDelta();
      timeS = timeS + interval;
      if (timeS > refreshTime) {
        renderer.render(scene, camera);
        timeS = 0;
      }
      planetGroup.children.forEach(function (obj) {
        obj.rotation.y += 0.01;
        if ((obj.angle >= startAngle) && (obj.angle < endAngle))
          obj.angle += 0.005 / obj.revolutionR * 400;
        obj.position.set(obj.revolutionR * Math.sin(obj.angle), 0, obj.revolutionR * Math.cos(obj.angle));
      })
      cloud.rotation.x += 0.0002;
      cloud.rotation.y += 0.0002;
      cloud.rotation.z += 0.0002;

      requestAnimationFrame(render);

      if (chooseMesh) {
        var worldVector = new THREE.Vector3(
          chooseMesh.position.x,
          chooseMesh.position.y,
          chooseMesh.position.z
        );
        var standardVector = worldVector.project(camera);
        var a = window.innerWidth / 2;
        var b = window.innerHeight / 2;
        var x = Math.round(standardVector.x * a + a);
        var y = Math.round(-standardVector.y * b + b);

        img.style.left = x + 'px';
        img.style.top = y - 280 + 'px';
      }
    }
    render();
    var controls = new THREE.OrbitControls(camera);

    var img = document.createElement("img");
    document.body.appendChild(img)
    img.style.position = 'absolute';
    img.style.display = 'block';

    // function choose(event) {
    //   img.src = '';
    //   chooseMesh = null;
    //   var Sx = event.clientX;
    //   var Sy = event.clientY;

    //   var x = (Sx / window.innerWidth) * 2 - 1;
    //   var y = -(Sy / window.innerHeight) * 2 + 1;

    //   var raycaster = new THREE.Raycaster();
    //   raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
    //   var intersects = raycaster.intersectObjects(intersectsArr, false);
    //   if (intersects.length > 0) {

    //     console.log(intersects[0].object.name);
    //     img.src = './UI/标签/' + intersects[0].object.name + '.png';
    //     chooseMesh = intersects[0].object
    //   }
    // }
    // addEventListener('click', choose);

    window.onresize = function () {
      renderer.setSize(window.innerWidth, window.innerHeight);
      k = (window.innerWidth) / (window.innerHeight);
      camera.left = -s * k;
      camera.right = s * k;
      camera.top = s;
      camera.bottom = -s;
      camera.updateProjectionMatrix();
    };

    function createMesh(geometry, URL) {

      var material = new THREE.MeshBasicMaterial({
        map: texLoader.load(URL),
        side: THREE.DoubleSide,
      });
      var mesh = new THREE.Mesh(geometry, material);
      return mesh;
    }

    function createSphereMesh(R, URL) {
      var geometry = new THREE.SphereGeometry(R, 100, 100);
      return createMesh(geometry, URL);
    }

    function createRingMesh(r, R, URL) {
      var geometry = new THREE.CylinderGeometry(r, R, 0, 100, 100, true);

      return createMesh(geometry, URL);
    }

    function circle(r) {
      var arc = new THREE.ArcCurve(0, 0, r, 0, 2 * Math.PI, true);
      var points = arc.getPoints(50);
      var geometry = new THREE.Geometry();
      geometry.setFromPoints(points);
      var material = new THREE.LineBasicMaterial({
        color: 0x666666
      });
      var line = new THREE.LineLoop(geometry, material);
      line.rotateX(Math.PI / 2);
      return line;
    }

    function cloudFun() {
      var geom = new THREE.Geometry();
      var material = new THREE.ParticleBasicMaterial({
        size: 0.01,
        vertexColors: true
      });
      var n = 1200;
      for (var i = 0; i < 3000; i++) {
        var particle = new THREE.Vector3(
          (Math.random() - 0.5) * n,
          (Math.random() - 0.5) * n,
          (Math.random() - 0.5) * n
        );
        geom.vertices.push(particle);
        let color_k = Math.random();
        geom.colors.push(new THREE.Color(color_k, color_k, color_k * 0.6));
      }

      var cloud = new THREE.ParticleSystem(geom, material);
      return cloud
    }
    function data() {
      let K = 5;
      return {
        sun: {
          name: '太阳',
          R: 10 * K,
          URL: './img/sun.jpg',
        },

        planet: [{
          name: '地球',
          R: 3.5 * K,
          URL: './img/earth.jpg',
          revolutionR: 75 * K,
        }],
      };
    }

    var imageDom = document.getElementById("card-img-top");
    imageDom.src = jieqiInfo[jieqiIdx].img;
    var titleDom = document.getElementById("card-title");
    titleDom.innerText = jieqiInfo[jieqiIdx].title;
    var textDom = document.getElementById("card-text");
    textDom.innerText = jieqiInfo[jieqiIdx].text;

  </script>
</body>

</html>